<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6"> <ul class='circle-container'> <li onclick="document.getElementById('innerContent').innerHTML='Railway Station<br /><b>2.2Kms</b>'" style="--circle-index:0; --total:8" data-index="0"><div class="img-border"><img src='https://i.ibb.co/ssfS6Qc/location1.png'></span></li> <li onclick="document.getElementById('innerContent').innerHTML='Bus Stop<br /><b>500m</b>'" style="--circle-index:1; --total:8" data-index="1"><div class="img-border"><img src='https://i.ibb.co/ssfS6Qc/location1.png'></span></li> <li style="--circle-index:2; --total:8" data-index="2"><div class="img-border"><img src='https://i.ibb.co/ssfS6Qc/location1.png'></span></li> <li style="--circle-index:3; --total:8" data-index="3"><div class="img-border"><img src='https://i.ibb.co/ssfS6Qc/location1.png'></span></li> <li style="--circle-index:4; --total:8" data-index="4"><div class="img-border"><img src='https://i.ibb.co/ssfS6Qc/location1.png'></span></li> <li style="--circle-index:5; --total:8" data-index="5"><div class="img-border"><img src='https://i.ibb.co/ssfS6Qc/location1.png'></span></li> <li style="--circle-index:6; --total:8" data-index="6"><div class="img-border"><img src='https://i.ibb.co/ssfS6Qc/location1.png'></span></li> <li style="--circle-index:7; --total:8" data-index="7"><div class="img-border"><img src='https://i.ibb.co/ssfS6Qc/location1.png'></span></li> <div class="seclected-content"> <p id="innerContent">Check Distance form Project Name</p> </div> </ul> </div> </div> </div>

.circle-container { position: relative; width: 20em; height: 20em; border-radius: 50%; padding: 0; list-style: none; margin: 5em auto 0; background: #EAEDEF; } .circle-container li .img-border{ border: 1px solid; border-radius: 50px; overflow: hidden; } .circle-container > * { display: block; position: absolute; top: 50%; left: 50%; margin: -3em; width: 90px; height: 90px; border-radius: 50px; border: none; padding: 16px; background: #fff; } .circle-container > *:nth-of-type(1) { transform: rotate(0deg) translate(10em) rotate(0deg); } /* Om */ .circle-container > *:nth-of-type(1), .circle-container > *:nth-of-type(2), .circle-container > *:nth-of-type(3), .circle-container > *:nth-of-type(4), .circle-container > *:nth-of-type(5), .circle-container > *:nth-of-type(6), .circle-container > *:nth-of-type(7), .circle-container > *:nth-of-type(8), .circle-container > *:nth-of-type(9), .circle-container > *:nth-of-type(10) { transform: rotate(calc(-360deg / var(--total) * var(--circle-index) )) translate(10em) rotate(calc(360deg / var(--total) * var(--circle-index) )); } .circle-container img { display: block; max-width: 100%; filter: grayscale(100%); transition: 0.15s; padding: 10px; background: #fff; } .circle-container img:hover { filter: grayscale(0); } .seclected-content{ position: absolute; width: 64%; top: 50%; left: 65%; transform: translate(-50%, 0%) !important; text-align: center; background:#EAEDEF; } .seclected-content p{ color: #3D98D1; font-size: 24px; line-height:30px; }